//webpack的作用 把很多文件打包整合到一起, 缩小项目体积, 提高加载速度 less/sass -> css、ES6/7/8 -> ES5 处理js兼容
//webpack模块,是node的一个第三方模块包, 用于打包代码
//yarn init -y                       初始化yarn
//yarn add webpack webpack-cli -D    安装依赖包
//scripts: {"build": "webpack"}      配置scripts(自定义命令)
//yarn build #或者 npm run build     运行打包命令

const path = require('path') //引入path 路径拼接模块 
const HtmlWebpackPlugin = require('html-webpack-plugin') //

module.exports = {//common-js 的语法 向外暴露元素
  mode:'production',
  entry: './src/main.js',            //设置webpack的入口   
  output: {                          //设置webpack的出口  告诉webpack从哪开始打包, 打包后输出到哪里
    path: path.resolve(__dirname, 'dist'),  //路径
    filename: 'bundle.js',                  //输出的文件名
    clean : true,                           //目录中只保留输出的文件
  },
  devServer: {
    port:3333,
  },
  module: { //入口文件中先要引入 css，less，图片和字体图标文件
    rules: [
      {      //webpack 不认识css格式文件 ， 安装依赖yarn add style-loader css-loader -D
        test: /\.css$/i,                     // 匹配所有的css文件
        use: ["style-loader", "css-loader"], // use数组里从右向左运行// 先用 css-loader 让webpack能够识别 css 文件的内容并打包// 再用 style-loader 将样式, 把css插入到dom中
      },
      {  //webpack 不认识css格式文件 ， 安装依赖yarn add less-loader  -D
        test: /\.less$/i,                                   // 匹配所有的less文件
        use: ["style-loader", "css-loader", "less-loader"], //先把less文件转化成css文件，再识别并打包css文件的内容，最后把style样式加入到dom中
      },
      {    //使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可
        test: /\.(png|svg|jpg|jpeg|gif)$/i, 
        type: 'asset',
      },
      {  //使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        type: 'asset/resource', //用asset module技术, asset/resource直接输出到dist目录下
        generator: {
          filename: 'font/[name].[hash:6][ext]' //可以让字体图标的文件 在一个目录下显示
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin({  //html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js
    template: './public/index.html' , // 自定义打包的html模版，和输出文件名字
    filename: 'index.html',
  })],
}
